mini-create-react-context

What is mini-create-react-context?

The mini-create-react-context package is a smaller implementation of the React Context API. It provides a way to pass data through the component tree without having to pass props down manually at every level. This package is particularly useful for managing state in a global context, such as theming, localization, or user authentication data.

What are mini-create-react-context's main functionalities?

Creating a context

This feature allows you to create a new context object. You can provide a default value that can be used when a component does not have a matching Provider above it in the tree.

{"import createReactContext from 'mini-create-react-context';\nconst MyContext = createReactContext(defaultValue);"}

Provider Component

The Provider component is used to wrap a part of your application where you want the context to be accessible. It accepts a 'value' prop that will be passed down to consuming components.

{"import React from 'react';\nimport { MyContext } from './MyContext';\n\nconst App = () => (\n  <MyContext.Provider value={/* some value */}>\n    {/* children components that can consume the context */}\n  </MyContext.Provider>\n);"}

Consumer Component

The Consumer component is used to access the context value provided by the nearest Provider above in the tree. It uses a render prop to provide the context value to your component.

{"import React from 'react';\nimport { MyContext } from './MyContext';\n\nconst MyComponent = () => (\n  <MyContext.Consumer>\n    {value => /* render something based on the context value */}\n  </MyContext.Consumer>\n);"}

Other packages similar to mini-create-react-context

react-context

This package provides a polyfill for the React Context API for older versions of React. It is similar to mini-create-react-context but is designed specifically for backward compatibility with React versions before 16.3.

create-react-context

This is another polyfill for the React Context API, created by the same author as mini-create-react-context. It has a similar API but is not as minimal, potentially including additional features or a larger bundle size.

react-broadcast

React Broadcast is a package that provides a similar functionality to the React Context API, allowing you to broadcast props down the component tree. It is an older solution that was used before the official Context API was introduced in React 16.3.

README

mini-create-react-context

(A smaller) Polyfill for the React context API

Install

npm install mini-create-react-context

You'll need to also have react and prop-types installed.

API

const Context = createReactContext(defaultValue);
/*
	<Context.Provider value={providedValue}>
		{children}
	</Context.Provider>

	...

	<Context.Consumer>
		{value => children}
	</Context.Consumer>
*/

Example

// @flow
import React, { type Node } from 'react';
import createReactContext, { type Context } from 'mini-create-react-context';

type Theme = 'light' | 'dark';
// Pass a default theme to ensure type correctness
const ThemeContext: Context<Theme> = createReactContext('light');

class ThemeToggler extends React.Component<
  { children: Node },
  { theme: Theme }
> {
  state = { theme: 'light' };
  render() {
    return (
      // Pass the current context value to the Provider's `value` prop.
      // Changes are detected using strict comparison (Object.is)
      <ThemeContext.Provider value={this.state.theme}>
        <button
          onClick={() => {
            this.setState(state => ({
              theme: state.theme === 'light' ? 'dark' : 'light'
            }));
          }}
        >
          Toggle theme
        </button>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class Title extends React.Component<{ children: Node }> {
  render() {
    return (
      // The Consumer uses a render prop API. Avoids conflicts in the
      // props namespace.
      <ThemeContext.Consumer>
        {theme => (
          <h1 style={{ color: theme === 'light' ? '#000' : '#fff' }}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

Compatibility

This package only "ponyfills" the React.createContext API, not other unrelated React 16+ APIs. If you are using a version of React <16, keep in mind that you can only use features available in that version.

For example, you cannot pass children types aren't valid pre React 16:

<Context.Provider>
  <div/>
  <div/>
</Context.Provider>

It will throw A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. because <Context.Provider> can only receive a single child element. To fix the error just wrap everyting in a single <div>:

<Context.Provider>
  <div>
    <div/>
    <div/>
  </div>
</Context.Provider>

Size difference to the original:

	original	mini
install size	50 kB	140 kB
minified	3.3 kB	2.3kB
minzip	1.3 kB	1.0kB